<template>
    <div class="login_container">
        <div class="login_form">
            <h3 class="form_title">管理系统</h3>
            <xkl-form :form="form">
                <template #_action>
                    <el-button type="primary" @click="login">登录</el-button>
                </template>
            </xkl-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import LoginService from '~/service/login';
import Login from '@admin/entity/login/Login';
import { onBeforeMount } from 'vue';
import { setToken } from '~/utils';
import useApp from '@admin/_find/store/app';

const appStore = useApp()

const loginService = new LoginService()

const form = new Login({ span: 24, mode: 'login', labelWidth: 80 }).active

const login = async () => {
    const payload = form.getBindingValue()

    form.submit(async (done) => {
        const res = await loginService.login(payload)
        if (res.code === 200) {
            setToken(res.token)
            await appStore.initUserInfo()
            await appStore.initRouters()
            $router.replace('/home')
        }
        done()
    })
}

const getCaptcha = async () => {
    const res = await loginService.getCaptcha({})
    console.log(res);
}

onBeforeMount(() => {
    getCaptcha()
})


</script>

<style lang="scss" scoped>
.login_container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: gray;

    position: relative;

    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-image: url('@admin/_find/assets/win11.jpg');
        background-size: cover;
        opacity: .5;
    }

    .login_form {
        width: 400px;
        background-color: rgba($color: #fff, $alpha: 0.9);
        // background-color: #fff;
        padding: 20px;
        border-radius: 20px;
        z-index: 1;

        .form_title {
            text-align: center;
            margin-top: 0;
            font-size: 16px;
        }

        .el-button {
            width: 100%;
        }
    }
}
</style>